<template>
  <div>
     <swiper ref="mySwiper" :options="swiperOptions" @swiper="onSwiper" @click="gg"
          @slideChange="onSlideChange">
            <swiper-slide>
              <div class="elementSlide">
                <img src="../assets/swiperImage/1.jpg" class="elementSlide">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="elementSlide">
                 <img src="../assets/swiperImage/2.jpg" class="elementSlide">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="elementSlide">
                 <img src="../assets/swiperImage/3.jpg" class="elementSlide">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="elementSlide">
                 <img src="../assets/swiperImage/4.jpg" class="elementSlide">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="elementSlide">
                 <img src="../assets/swiperImage/5.jpg" class="elementSlide">
              </div>
            </swiper-slide>
            <swiper-slide>
              <div class="elementSlide">
                 <img src="../assets/swiperImage/6.jpg" class="elementSlide">
              </div>
            </swiper-slide>
        </swiper>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import 'swiper/swiper-bundle.min.css'
import {
  Swiper,
  SwiperSlide
} from 'vue-awesome-swiper'
import SwiperCore, {
  Autoplay,
  Navigation
} from 'swiper'
SwiperCore.use([Navigation, Autoplay])
export default {
  data () {
    return {
      swiperOptions: {
        initialSlide :2, // 设定初始化时slide的索引
        slidesPerView: 5, // 当前页面可以显示滑动模块的数量
        grabCursor: true, // 设置为true时，鼠标覆盖Swiper时指针会变成手掌形状
        centeredSlides: true,
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.$swiper
    }
  },
  methods: {
    onSwiper (swiper) {
      console.log(swiper)
    },
    onSlideChange () {
      console.log('slide change')
    },
    gg () {
      console.log('click')
    }
  },
  mounted () {
    console.log('Current Swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
  }
}
</script>
<style scoped>
.elementSlide {
  border:1px solid #199580;
  width:500px;
  height:800px;
  filter:blur(5px)
}
.swiper-slide-active {
  z-index:9999 !important;
}
.swiper-slide-active .elementSlide {
  filter:none !important;
  border:1px solid #199580
}
.swiper-slide-next,.swiper-slide-prev{
  z-index: 9998 !important;
}
.swiper-slide-next .elementSlide .swiper-slide-prev .elementSlide {
    background: #FFFFFF;
    border:1px solid #17977A;
    /* box-shadow: 0px 2px 16px rgba(10, 65, 56, 0.44); */
   /* opacity: 1;    */
    border-radius: 12px;
    /* filter: blur(5px) brightness(1.01) !important; */
    filter: blur(3px) !important;
}
</style>
